<template>
<div>
     <fou-dialog :title="'入倉'" v-model:dialogValue="dialogValue" :width="'75%'">
      <template #content="">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="24">
        <!-- <el-col :span="24">
          <el-form-item label="日期" prop="create_time">
             <el-date-picker
                v-model="form.create_time"
                type="date"
                placeholder="請選擇日期"
                size="default"
                format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="供應商" prop="supplier_id" >
              <el-button  @click="addSupplier" type="primary" circle icon="Search"></el-button>
              <div class="ml-[20px]">名稱：{{person.name}}</div>
              <div class="ml-[20px]">聯絡人：{{person.contact}}</div>
              <div class="ml-[20px]">電話：{{person.mobile}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="備註" prop="remark">
             <el-input type="textarea" v-model="form.remark"   ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="學校" prop="data" >
              <el-button  @click="addSchool" type="primary" circle icon="Search"></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <div style="width:100%">
              <schoolTable :list="form.data"
              @del_school="(v)=>{delschool(v)}"
              @addProduct="(v)=>{addproduct(v)}"
              ></schoolTable>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

           <div class="flex justify-end mt-10 w-[100%]" >
            <el-button @click="dialogValue = false">取消</el-button>
            <el-button type="primary" @click="confirm(ruleFormRef)" color="#081F42">確定</el-button>
           </div>
      </template>
     </fou-dialog>
     <supplierDio ref="SupplierRef" @update="getSupplier"></supplierDio>
     <schoolDio ref="SchoolRef" @update="getSchool"></schoolDio>
</div>
</template>

<script setup>
import { ref ,reactive,watch,onMounted} from 'vue' 
import { dayjs } from "element-plus";
import {addWarehousing} from '@/http/index.js'
import {message} from '@/common/function.js'
import {elProps,status_options} from './index'
import { add, subtract, } from 'high-precision-four-fundamental-rules'
import supplierDio from './dialog/supplier.vue'
import schoolDio from './dialog/school.vue'
import schoolTable from './tableList/schoolTable.vue'
// 添加供應商
const SupplierRef = ref('')
const addSupplier = async()=>{
  await SupplierRef.value.TableData()
  SupplierRef.value.SupplierDia = true
}
const person = ref({})
const getSupplier =(row)=>{
console.log(row);
form.supplier_id = row.id
localStorage.setItem('supplier_id',row.id),
person.value = row
}
//添加學校
const SchoolRef = ref('')
const addSchool = async()=>{
  await SchoolRef.value.TableData()
  SchoolRef.value.SchoolDia = true
}
const getSchool = (row)=>{
  form.data = row
}
const delschool = (row)=>{
  form.data = form.data.filter(item => item.id != row.id)
}

const dialogValue = ref(false)
const rules = reactive({
  supplier_id: [{ required: true, message: "請選擇供應商", trigger: ["blur",'change'] }],
  data: [{ required: true, message: "請選擇學校", trigger: ["blur",'change'] }],
}); 
const form = reactive({
    // create_time:'',
    supplier_id:'',
    remark:'',
    data:[]
});



const ruleFormRef = ref('')
const emit = defineEmits(['update'])
const confirm = async (formEl,type) => {
  if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
         let has = form.data.every(v=>{
            return v.product.length !==0
          }) 
          console.log(has);
          if (!has) {
           return message('每個選擇學校至少添加一個產品','warning')
          }
          form.data.map(e=>{
            e.school_id = e.id
            e.product = JSON.stringify(e.product)
          })
          console.log(form);
            const data = await addWarehousing(form)
            if (data.code == 200) {
              message('入倉添加成功')
              emit('update')
            }
        dialogValue.value = false
      }
    })
};

defineExpose({
    dialogValue,
})

</script>

<style lang='less'  scoped>
.el-col{
  padding: 0 !important;
}
.product{
  .el-button{
    color: #fff;
  }
}
</style>

